<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2_固定定位全屏遮罩</title>
    <style>
        .mask{
            /*width: 300px;*/
            /*height: 300px;*/
            background-color: rgba(0,0,0,.3);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;

    }
    </style>
</head>
<body>
<div class="mask"></div>
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aspernatur atque autem consequatur
        consequuntur cum deleniti doloremque enim excepturi explicabo fugit harum, libero nostrum obcaecati quod quos
        rem similique temporibus?
    </div>
    <div>Autem, in sit! Dignissimos doloremque, necessitatibus. Adipisci atque dignissimos enim exercitationem,
        inventore maiores minus molestias officiis quae, quidem rem reprehenderit sed sint, voluptatem voluptates.
        Consequuntur error illo impedit necessitatibus obcaecati.
    </div>
    <div>Cum ipsa magnam necessitatibus omnis quae tempora! A ea est nisi omnis, sint veniam. Atque dolor eaque ex illum
        in molestiae molestias odit quae qui sint soluta, vitae. Minima, non?
    </div>
    <div>Culpa dolorum esse fuga incidunt minima porro quia reprehenderit sapiente tempore temporibus, totam ullam.
        Accusantium adipisci autem beatae dignissimos doloremque ea explicabo fuga, fugiat nisi, quaerat quia
        reprehenderit saepe vel?
    </div>
    <div>Adipisci aliquam blanditiis cum deleniti deserunt dolore dolores doloribus dolorum ea eaque enim et facere
        fugit id impedit, maiores minus molestiae neque nesciunt nobis nulla perferendis reprehenderit repudiandae velit
        vitae.
    </div>
    <div>Accusamus ad distinctio ea eveniet in nam sed voluptates. Animi culpa dolorem dolorum, fugit illo iste itaque
        magnam molestias nam nobis numquam perferendis quas tenetur ullam voluptatibus! Optio, repudiandae, sunt.
    </div>
    <div>Aliquid exercitationem inventore libero omnis repellat. Aut error facilis nam nisi nulla rem sint voluptatibus.
        Consectetur illum, ratione. Ad cum distinctio dolor ea, expedita ipsum maiores minus molestias natus odit.
    </div>
    <div>Ab alias aliquam architecto enim esse et harum in incidunt, iusto libero pariatur praesentium provident quae
        quaerat quasi quidem ratione rem repellat velit voluptas. Cum enim explicabo rem rerum sapiente.
    </div>
    <div>Amet consequatur corporis culpa cum eaque, eius enim est eum, excepturi expedita fuga fugiat illum molestias
        numquam, omnis provident quaerat quas quasi quod tempora ut velit veritatis vitae voluptatibus voluptatum.
    </div>
    <div>Accusantium corporis quae quisquam tenetur voluptates? Aperiam aspernatur cum deleniti, dolor dolores, ea eos,
        ex exercitationem fuga impedit iusto laudantium libero minus neque odio odit officiis quae unde veritatis
        voluptates.
    </div>
    <div>Aspernatur laborum magni non omnis porro quae recusandae tempora vero? A consequuntur deleniti eligendi error
        impedit, magni nesciunt nobis officiis possimus provident quae quas ratione repudiandae similique ullam, vitae
        voluptatem.
    </div>
    <div>Autem modi nobis velit! Consequatur ducimus eveniet facilis, harum impedit magni odio pariatur quo reiciendis
        rerum, similique velit. Aliquam aliquid atque consequatur eos eum, hic necessitatibus odit omnis quae sit?
    </div>
    <div>A asperiores autem deleniti ex excepturi, exercitationem fugiat harum hic iure laudantium molestias natus nobis
        obcaecati praesentium quia ratione rem repellendus repudiandae saepe sequi sunt tempora tempore unde veniam
        voluptatibus.
    </div>
    <div>Accusantium architecto commodi cupiditate eaque esse et fuga molestiae, nam nemo non, perferendis quo quod
        tempora. Eveniet harum ipsum minima, officia quam qui voluptatibus! Amet animi consequuntur eius id nulla.
    </div>
    <div>Alias aspernatur, commodi culpa debitis deleniti eligendi eum explicabo in laboriosam molestiae molestias
        natus, non officia quam, quod recusandae rerum sapiente sequi temporibus voluptatem? Doloribus ducimus earum
        eveniet exercitationem maxime!
    </div>
    <div>Architecto beatae consectetur deserunt et maiores modi, mollitia nihil non odio officia, qui quibusdam quisquam
        reiciendis repellat, veritatis voluptate voluptatem. Cum harum ipsam omnis qui quod ratione, sequi! Doloremque,
        molestias.
    </div>
    <div>Architecto et inventore itaque laborum magni pariatur praesentium, quas voluptatibus? Amet cumque dolores illum
        quidem voluptate? Ab atque deleniti ducimus earum harum ipsum minima, molestiae molestias provident quae,
        reiciendis veniam.
    </div>
    <div>Accusamus animi autem dolor ducimus esse harum in molestias natus neque officia praesentium quibusdam ratione
        repudiandae, tenetur voluptate? Alias eos esse est impedit ipsum nemo non nulla perferendis perspiciatis
        reprehenderit.
    </div>
    <div>Accusamus alias, consequatur culpa eligendi maiores molestias nam neque nisi obcaecati, perspiciatis quae quasi
        recusandae repudiandae saepe sapiente suscipit totam vel, voluptate? Adipisci aspernatur labore nihil placeat
        suscipit veritatis voluptate.
    </div>
    <div>Aspernatur autem beatae corporis deleniti dicta dolor eaque enim ex excepturi in, porro possimus praesentium.
        Aliquam autem illum maiores quia sit suscipit voluptate? Alias beatae doloremque inventore nesciunt vitae
        voluptates!
    </div>
    <div>Animi beatae blanditiis consequatur cupiditate dolorem doloribus dolorum eum facilis fuga illum, ipsa ipsum
        laboriosam libero odit pariatur quasi quod ratione repudiandae soluta totam velit voluptate voluptatum? Cumque,
        est sunt!
    </div>
    <div>Aspernatur ea nam natus nesciunt obcaecati. Aliquam amet aut doloremque molestias ratione vel velit voluptatum?
        Ad adipisci aspernatur, at dolorum et explicabo labore necessitatibus non nulla, quaerat repudiandae sit
        voluptatum.
    </div>
    <div>Accusantium ad, architecto aspernatur blanditiis delectus error explicabo, impedit in ipsa magnam molestias
        nesciunt nulla provident quidem quo recusandae, repellat. Accusamus, doloribus dolorum earum itaque molestiae
        nisi numquam sint tempore.
    </div>
    <div>Aspernatur ducimus eaque earum error esse id quos reiciendis tenetur. Commodi consequatur deserunt dolor eaque
        eligendi exercitationem, ipsum iste itaque minima modi neque placeat provident quam quis quos sed voluptatum!
    </div>
    <div>Accusamus accusantium, aperiam culpa doloremque ea enim ex facere harum inventore iure, maiores maxime placeat,
        sint sunt vero. Dolores expedita facere hic illo nulla reiciendis tempora voluptatibus! Doloremque, qui,
        veritatis.
    </div>
    <div>Asperiores consequuntur corporis cupiditate delectus doloribus eveniet hic ipsam magni nam nulla, numquam odit
        omnis perferendis porro possimus quibusdam quidem quod ratione reiciendis saepe similique suscipit tenetur
        totam, veniam, voluptate.
    </div>
    <div>Eveniet, facilis illum modi necessitatibus quam tempora. Blanditiis ex illum maiores ullam vitae? Accusantium
        alias cum dolores excepturi exercitationem illum magnam molestiae omnis perferendis porro, quae quo sapiente,
        veritatis voluptate.
    </div>
    <div>Adipisci amet animi architecto commodi, cumque deserunt dignissimos et excepturi expedita fugit hic illo illum
        in maiores minus natus nisi officiis pariatur porro quae quaerat repellat sit unde vel vero.
    </div>
    <div>Commodi culpa itaque iusto nihil obcaecati omnis placeat quae reiciendis? Cumque dignissimos distinctio facere
        inventore iure iusto officia porro quae, sunt tempora? Ab at cumque, iste mollitia praesentium provident sequi.
    </div>
    <div>Accusantium aspernatur autem, commodi corporis deserunt ducimus earum eligendi eos est eum illum impedit
        laboriosam laborum laudantium minima necessitatibus nobis praesentium quasi quis quo ratione repellat
        repellendus, reprehenderit sunt totam!
    </div>
    <div>Aliquid fugiat fugit harum magni nihil sed? Aliquam assumenda blanditiis consectetur distinctio doloribus eius
        illum in ipsa ipsam labore libero natus necessitatibus nesciunt perspiciatis, sequi suscipit, veniam voluptatem
        voluptatibus voluptatum.
    </div>
    <div>Amet assumenda culpa, dicta enim eos eveniet exercitationem fugiat illo impedit incidunt laborum maxime nostrum
        nulla odio perferendis provident qui quibusdam quo recusandae similique sint, soluta sunt tempore ullam
        voluptatibus?
    </div>
    <div>Aliquid aspernatur at, deleniti dolorum eius est eum eveniet expedita iste magnam necessitatibus, non odit quae
        quasi repellat, repellendus ullam? Dolores ea minima minus neque odit sint sunt unde veniam.
    </div>
    <div>Dolores ex laboriosam porro quia ut! Accusantium ad architecto beatae commodi cum debitis dolorum ea eaque, eos
        hic itaque nostrum omnis pariatur quia quidem reiciendis rerum sed ullam, vitae voluptas.
    </div>
    <div>Aperiam blanditiis consequuntur culpa cum debitis deleniti, eius fugiat ipsum iste itaque minima nesciunt
        pariatur quae qui ratione sequi sit sunt voluptas? Aperiam dicta earum ipsum mollitia possimus quidem saepe.
    </div>
    <div>Accusantium alias aspernatur assumenda autem delectus dolorem doloremque doloribus dolorum eaque enim fugiat
        fugit hic illo laborum nihil officiis omnis pariatur quae, quam quisquam, rem repellendus reprehenderit
        repudiandae tenetur velit!
    </div>
    <div>Accusamus beatae commodi consectetur consequuntur dolor dolore est exercitationem explicabo id in iure laborum,
        laudantium libero maxime minima modi nihil porro possimus praesentium recusandae repellendus sint unde veritatis
        vero voluptatem!
    </div>
    <div>Dicta dolorem eius magni, obcaecati possimus quam quasi sit soluta vitae voluptates? Amet in laudantium quas
        reiciendis sed. Adipisci excepturi necessitatibus, officiis perferendis quibusdam reiciendis reprehenderit
        repudiandae saepe veniam? In.
    </div>
    <div>Accusantium blanditiis dolorem error est eveniet expedita, illum ipsam ipsum itaque iure labore laudantium
        libero nobis odio officia quae quam quas quo voluptas voluptates? Deleniti eum fugit nam qui unde?
    </div>
    <div>Aut est eveniet natus officia possimus repellat, sed. Animi blanditiis consequatur dignissimos enim et eveniet
        ex facilis, impedit labore nesciunt optio perferendis quae quibusdam quidem quos rem, sunt temporibus
        voluptates.
    </div>
    <div>Alias architecto, at doloribus incidunt ipsa laudantium modi placeat provident quae quasi quia quis similique
        temporibus tenetur voluptate. Aperiam delectus excepturi exercitationem neque obcaecati odit quas quia rem
        temporibus vero.
    </div>
    <div>A, amet beatae consequuntur culpa cumque cupiditate earum enim eos eveniet exercitationem explicabo facere
        fugiat illum ipsa ipsum maxime molestias nihil nostrum optio, perspiciatis porro provident reiciendis, sed
        suscipit vero?
    </div>
    <div>At corporis delectus earum excepturi fugit illo ipsum iste nam necessitatibus, nobis odit pariatur voluptates.
        Accusamus dignissimos dolorem magnam optio possimus! Accusamus adipisci et nostrum porro. Explicabo quas
        repudiandae sed?
    </div>
    <div>Atque beatae doloribus eos est, excepturi fugit magni minus obcaecati officiis quae, reiciendis tempora, ut
        veniam. Asperiores culpa eligendi in nostrum ratione repudiandae unde vel. Alias nostrum nulla sapiente soluta.
    </div>
    <div>Aliquam amet, consectetur corporis explicabo incidunt laborum libero natus nemo quam. Deserunt dicta
        necessitatibus porro quidem quo repellat sapiente tempora vero, voluptatem? Dolore dolorum esse excepturi
        expedita molestias, provident vel.
    </div>
    <div>Autem doloribus eos excepturi? Accusamus assumenda officiis pariatur provident sed sint veniam. Alias delectus
        dicta esse inventore ipsa iure obcaecati odio officia officiis, omnis quaerat, quam, quis tempora vitae
        voluptas.
    </div>
    <div>Beatae deserunt doloremque doloribus facilis fugit harum incidunt, maiores nemo non numquam quae quia, quo quos
        tenetur vel. Delectus ducimus eaque eum fuga illum obcaecati quo sit suscipit voluptates voluptatum.
    </div>
    <div>Deleniti dicta, eligendi ipsa quae quo ratione repellendus! Ab accusamus dolorem, earum eligendi error id
        impedit magni minus natus provident quaerat tenetur totam vero! Amet eius labore laboriosam quo reprehenderit.
    </div>
    <div>Aliquam assumenda autem culpa dicta earum enim inventore laudantium non porro quas qui, quia ratione,
        recusandae repudiandae vitae. Ad at eaque, laudantium modi nobis porro quaerat? Accusamus aliquid error eum.
    </div>
    <div>A at deleniti dolor eveniet ex fugiat impedit ipsum necessitatibus pariatur soluta tenetur vel, veritatis
        vitae. Accusamus blanditiis, consequuntur eveniet fugiat harum, itaque, officiis perferendis porro quo sit
        soluta vel!
    </div>
</div>
}
</body>
</html>